<template>
  <div class="field-formula-action-config">
    <div style="padding-left: 10px; padding-bottom: 5px">
      {{actionLabel}} :
    </div>
    <div>
      <table>
        <tr>
          <td>浏览</td>
          <td>编辑</td>
          <td>隐藏</td>
          <td>必填</td>
        </tr>
        <tr>
          <td><a-radio :checked="fieldAction.auth === AuthType.browse" @click="() => fieldAction.auth = 'browse'"/></td>
          <td><a-radio :checked="fieldAction.auth === AuthType.edit" @click="() => fieldAction.auth = 'edit'"/></td>
          <td><a-radio :checked="fieldAction.auth === AuthType.hide" @click="() => fieldAction.auth = 'hide'"/></td>
          <td><a-checkbox :disabled="fieldAction.auth !== AuthType.edit"
            :checked="!!fieldAction.required" @click="() => fieldAction.required = !fieldAction.required"/></td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import {AuthType} from '@comp/hhd/design/Constants';

export default {
  name: 'FieldActionFormulaPropertyConfig',
  props: {
    actionLabel: createProps(String),
    fieldAction: createProps(Object, () => ({
      actionTitle: undefined,
      auth: undefined,
      required: false,
    }))
  },
  data() {
    return {
      AuthType
    };
  },
  watch: {
    'fieldAction.auth'() {
      this.$nextTick(() => {
        if(this.fieldAction && this.fieldAction.auth && (this.fieldAction.auth === AuthType.hide)) {
          this.fieldAction.required = false
        }
        if(this.fieldAction && this.fieldAction.auth && (this.fieldAction.auth === AuthType.browse)) {
          this.fieldAction.required = false
        }
      })
    }
  }
};
</script>
<style>
.field-formula-action-config {
  padding-top: 10px;
  padding-left: 10px;
}

.field-formula-action-config table td {
  width: 50px;
  text-align: center;
}

.field-formula-action-config table {

}
</style>